<template>
  <div class="Index">
    <CommonAddBtn @click="handleAdd"/>
    <div class="header">
      <div class="time">
        <div class="icon prev" @click="handlePrev">
          <i class="iconfont iconxiayibu"></i>
        </div>
        <div class="text">{{ formatDate(new Date(yyyyMM), 'yyyy年MM月') }}</div>
        <div class="icon" @click="handleNext">
          <i class="iconfont iconxiayibu"></i>
        </div>
      </div>
    </div>
    <van-tabs :active="activeNav" @change="handleNavChange" sticky swipeable >
      <van-tab v-for="item in types" :key="item.value" :name="item.value" :title="item.name">
        <ListPanel
          :type="item.value"
          :activeNav="activeNav"
          :yyyyMM="yyyyMM"
          :reachBottomTime="reachBottomTime"
          :pullDownRefreshTime="pullDownRefreshTime"
          :coverRefreshTime="coverRefreshTime"
          @showModel="handleShowModel"
          @showTips="handleShowTips"
        />
      </van-tab>
    </van-tabs>
    <CommonConfirmModel ref="CommonConfirmModel" />
    <CommonTips ref="CommonTips" />
  </div>
</template>

<script>
import ListPanel from './ListPanel'
import { formatDate } from '@/utils'
import CommonConfirmModel from '@/components/CommonConfirmModel'
import CommonTips from '@/components/CommonTips'
import { navToFace } from '@/utils/face'
import CommonAddBtn from '@/components/CommonAddBtn'

const defaultNav = '0'

export default {
  components: {
    ListPanel,
    CommonConfirmModel,
    CommonTips,
    CommonAddBtn,
  },
  data () {
    return {
      formatDate,
      activeNav: defaultNav,
      reachBottomTime: Date.now(),
      pullDownRefreshTime: Date.now(),
      coverRefreshTime: Date.now(),
      yyyyMM: formatDate(new Date(), 'yyyy-MM'),
      types: [
        {
          value: '0',
          name: '待完成',
        },
        {
          value: '1',
          name: '已完成',
        },
      ],
      isFirstShow: true,
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  onLoad (option) {
    this.activeNav = option.activeNav || defaultNav
  },
  onShow () {
    if (!this.userInfo.certificate) {
      uni.switchTab({
        url: '/pages/home/index',
      })
      uni.showModal({
        title: '未实名认证',
        content: '很抱歉，您还未实名认证，是否立刻实名认证？',
        success ({ confirm, cancel }) {
          if (confirm) {
            navToFace()
          }
          if (cancel) {
            uni.navigateBack()
          }
        },
      })
    } else if (!this.userInfo.npcmember) {
      uni.switchTab({
        url: '/pages/home/index',
      })
      uni.showModal({
        title: '非人大代表',
        content: '很抱歉，您不是人大代表，无法使用此功能！请联系所在选区管理员，在后台添加人大代表档案信息！',
        showCancel: false,
      })
    }
    if (this.isFirstShow) {
      this.isFirstShow = false
    } else {
      this.coverRefreshTime = Date.now()
    }
    const tabBarParams = this.$store.state.tabBarParams
    if (Date.now() - tabBarParams.time < 1000) {
      this.activeNav = tabBarParams.params.activeNav || defaultNav
    }
  },
  onReachBottom () {
    this.reachBottomTime = Date.now()
  },
  onPullDownRefresh () {
    this.pullDownRefreshTime = Date.now()
  },
  methods: {
    handleNavChange (e) {
      this.activeNav = e.detail.name
    },
    handleAdd () {
      uni.navigateTo({
        url: '/pages/todoForm/index',
      })
    },
    handlePrev () {
      const newTime = new Date(new Date(this.yyyyMM).valueOf() - (1000 * 60 * 60 * 24 * 1))
      this.yyyyMM = formatDate(new Date(newTime), 'yyyy-MM')
    },
    handleNext () {
      const newTime = new Date(new Date(this.yyyyMM).valueOf() + (1000 * 60 * 60 * 24 * 31))
      this.yyyyMM = formatDate(new Date(newTime), 'yyyy-MM')
    },
    handleShowModel (config) {
      this.$refs.CommonConfirmModel.$show(config)
    },
    handleShowTips (config) {
      this.$refs.CommonTips.$show(config)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.Index {
	.header {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		margin-bottom: 10px;
		background: #fff;

		.time {
			display: flex;
			align-items: center;
			color: #e51e1e;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 19px;
				height: 19px;
				border-radius: 50%;

				.iconfont {
					font-size: 12px;
				}

				&.prev {
					transform: rotate(180deg);
				}
			}

			.text {
				margin: 0 30px;
				font-size: $fz-xl;
				color: #e51e1e;
			}
		}
	}
}
</style>
